<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>发放优惠券</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="fonts/glyphicons-halflings-regular.woff2">
    <style>
        .container2 {
            display: flex;
            align-items: center;
            justify-content: left;
        }
    </style>
</head>
<body>
<div id="top"></div>
<div class="container" style="margin-top: 5%;margin-left: 20%">
    <h1>发放优惠券</h1>

    <div class="form-group">
        <p>优惠劵类型：</p>
        <label>
            <input type="radio" name="discount" value="1">
            10元优惠券
        </label>
        <br>
        <label>
            <input type="radio" name="discount" value="2">
            20元优惠券
        </label>
        <br>
        <label>
            <input type="radio" name="discount" value="3">
            50元优惠券
        </label>
        <br>
        优惠券数量<br>
        <div class="container2">
            <div class="input-group">
                       <span class="input-group-btn">
                           <button id="subtract" class="btn btn-default" type="button">-</button>
                       </span>
                <label for="num"></label><input type="text" class="form-control" id="num" value="1" readonly="readonly"
                                                style="width:40px">
                <span class="input-group-btn">
                           <button id="add" class="btn btn-default" type="button">+</button>
                       </span>
            </div>
        </div>
    </div>
    <br><br>
    <button id="send" type="button" class="btn btn-primary">发放</button>
</div>

<script type="text/javascript" src="js/jquery-3.6.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#top").load("top.html")

        //增加数量点击事件
        $("#add").click(function () {
            let num = $("#num")
            num.val(parseInt(num.val()) + 1)
        })
        //减少数量点击事件
        $("#subtract").click(function () {
            let num = $("#num")
            if (parseInt(num.val()) > 1) {
                num.val(parseInt(num.val()) - 1)
            }
        })

        //发放点击事件
        $("#send").click(function () {
            //接收传过来的pId 并发送ajax请求
            const searchParams = new URLSearchParams(location.search);
            const pId = searchParams.get("pId");
            //获取优惠券类型
            let selectedOption = $("input[name=discount]:checked").val();
            alert("类型:"+selectedOption)
            //获取优惠券数量
            let amount = $("#num").val()
            alert("数量:"+amount)
            $.ajax({
                url: "/PDD/product?method=sendDiscount",
                data: {
                    "pId": pId,
                    "type": selectedOption,
                    "amount": amount
                },
                dataType: "json",
                type: "post",
                success: function (data) {
                    if (data.code === 1) {
                        alert("优惠券发放成功")
                        window.history.back()
                    }
                }
            })
        })
    })
</script>
</body>
</html>